<style scoped lang="scss">
.uploadimage {
  background: #ffffff;
  height: 100%;
  width: 100%;
  color: grey;
  position: relative;
}
.chosekuang {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
  border: dotted 1px grey;
  border-radius: 10px;
}
.imgyulan {
  min-width: 50px;
  height: auto;
  border-radius: 10px;
}
</style>
<style lang="scss">
.cropperdialog .el-dialog__body {
  padding: 0 !important;
}
.uploadimage {
  .el-dialog__headerbtn {
    font-size: 30px !important;
  }
}
</style>
<template>
  <div class="uploadimage">
    <div class="chosekuang fxrow fxcc">
      <input ref="imginput" type="file" @change="changeimage" alt="图片" style="opacity:0;position: absolute;cursor: pointer;width: 100%;height: 100%;">
      <i v-show="!imagetemp" class="el-icon-plus"></i>
      <img v-show="imagetemp" :src="imagetemp" class="imgyulan" style="width: 100%;height: 100%;">
    </div>
    <el-dialog title="裁剪图片" center :visible.sync="dialogVisible" width="90%" @opened="dialogOpened" @closed="dialogClosed" custom-class="cropperdialog" :close-on-click-modal="false">
      <div class="fxrow fxcc" style="overflow-x: scroll;">
        <div style="width:1300px;min-width:1270px;min-height:260px;height:600px;">
          <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :centerBox="option.centerBox" :high="option.high" :infoTrue="option.infoTrue" :maxImgSize="option.maxImageSize" :enlarge="option.enlarge" :mode="option.mode"></vueCropper>
        </div>
        <div></div>
      </div>
      <span slot="footer" class="dialog-footer fxcc" style="margin-top:30px;">
        <el-button @click="cancelCrop" type="primary" plain size="medium">取 消</el-button>
        <el-button type="primary" @click="uploadCropImg" plain size="medium">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
require("assets/scss/cropper.min.css");
import { VueCropper } from "vue-cropper";
export default {
  data: function() {
    return {
      imagetemp: "",
      imageUrl: "",
      avatar: null,
      avatarHeight: 0,
      avatarWidth: 0,
      fileList: [],
      imgSrc: "",
      selectImgSrc: "",
      selectImg: null,
      dialogVisible: false,
      fileObj: {},
      inputvalue: "",
      cropper: null,
      fileType: [],
      fileSize: "",
      uploadType: "",
      option: {
        img: "",
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: this.width,
        autoCropHeight: this.height,
        centerBox: false,
        high: true,
        cropData: {},
        enlarge: 1,
        mode: "contain",
        maxImgSize: 2000
      }
    };
  },
  props: {
    fileinfo: Object,
    width: "",
    height: ""
  },
  activated() {
    this.imagetemp = "";
  },
  mounted() {
    this.init();
  },
  components: { VueCropper },
  methods: {
    init() {
      if (!this.width) {
        console.error("lack of params width");
      }
      if (!this.height) {
        console.error("lack of params width");
      }
    },
    dialogOpened() {},
    dialogClosed() {
      this.$refs.imginput.value = "";
      this.$refs.cropper.clearCrop();
    },
    cancelCrop() {
      this.$refs.imginput.value = "";
      this.$refs.cropper.clearCrop();
      this.dialogVisible = false;
    },
    uploadCropImg() {
      // 获取截图的blob数据
      this.$refs.cropper.getCropBlob(imgdata => {
        // FormData 对象
        var form = new FormData();
        // 文件对象
        form.append("file", imgdata);
        // 其他参数
        form.append("filename", "lala");
        form.append("filetype", imgdata.type.replace("image/", ""));
        let keys = Object.keys(this.fileinfo);
        keys.forEach(key => {
          form.append(key, this.fileinfo[key]);
        });
        this.$axios
          .post(this.httpRoot.BASEURL_PRGOL + "rest/pub/apd/upload", form, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            var data = res.data;
            if (data.result == "true") {
              this.dialogVisible = false;
              var resultData = data.resultData;
              this.$emit("imageUrl", resultData);
              this.$message.success("图片上传成功！");
              this.$refs.imginput.value = "";
              this.$refs.cropper.clearCrop();
            } else {
              this.$error(data.resultMessage);
            }
          })
          .catch(err => {
            console.error(err);
            this.$error("图片上传失败，请重新上传");
          });
      });
    },
    changeimage() {
      var file = this.$refs.imginput.files[0];
      if (!file) {
        return;
      }
      var reader = new FileReader();
      reader.onload = () => {
        this.imagetemp = reader.result;
        this.$set(this.option, "img", reader.result);
      };
      reader.readAsDataURL(file);
      this.dialogVisible = true;
    }
  }
};
</script>
